import React from 'react';
import {
    MenuUnfoldOutlined
} from '@ant-design/icons';
import { Button, Layout, Avatar, Dropdown, Menu as AntdMenu } from 'antd';
import { useDispatch } from 'react-redux';
import { isCollapse } from '../../store/reducer/tab';
import './index.css';

const { Header } = Layout;

// 退出主页面事件
const loginOut = () => {
    localStorage.removeItem('token');
    window.location.href = '/login';
};

// 定义头部下拉菜单组件的数据
const headerMenuDatas = [
    {
        key: '1',
        label: (
            <span>
                个人资料
            </span>
        ),
    },
    {
        key: '2',
        label: (
            <span>
                修改资料
            </span>
        ),
    },
    {
        key: '3', // 确保每个 key 唯一
        label: (
            <span onClick={loginOut}>
                退出
            </span>
        ),
    }
];

const CommonHeader = ({ collapsed }) => {
    const dispatch = useDispatch();
    
    // 点击展开收起按钮
    const setCollapsed = () => {
        dispatch(isCollapse());
    };

    return (
        <Header>
            <div className="header">
                <div className="header-left">
                    <Button
                        type="text"
                        icon={<MenuUnfoldOutlined className='triggerIcon' />}
                        onClick={setCollapsed}
                    />
                </div>
                <div className="header-right">
                    <Dropdown
                        overlay={
                            <AntdMenu>
                                {headerMenuDatas.map(item => (
                                    <AntdMenu.Item key={item.key} onClick={item.onClick}>
                                        {item.label}
                                    </AntdMenu.Item>
                                ))}
                            </AntdMenu>
                        }
                        placement="bottom"
                        arrow={{
                            pointAtCenter: true,
                        }}
                    >
                        <Avatar src={require('../../assets/imgs/01.jpg')} alt="avatar" />
                    </Dropdown>
                </div>
            </div>
        </Header>
    );
};

export default CommonHeader;
